<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <!-- 新增 -->
        <el-button
          slot="left"
          v-permission="['admin','storage:add']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-upload"
          @click="crud.toAdd"
        >分配服务器
        </el-button>
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">

          <el-form-item label="服务器ID" prop="serverIds">
            <el-select
              v-model="form.serverIds"
              value-key="id"
              style="width: 178px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in serversInfo"
                :key="item.id"
                :label="item.serverName+'('+item.serverNo+')'"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column fixed prop="serverNo" label="服务器编号"/>
        <el-table-column fixed prop="serverName" label="服务器名称"/>
        <el-table-column prop="publicIp" label="公网IP"/>
        <el-table-column prop="privateIp" label="内网IP"/>
        <el-table-column prop="os" label="操作系统"/>
        <el-table-column prop="cpu" label="cpu：单位核"/>
        <el-table-column prop="memory" label="内存：单位G"/>
        <el-table-column prop="disk" label="磁盘：单位G"/>
        <el-table-column prop="ownerUser" label="负责用户"/>
        <el-table-column v-if="checkPer(['admin','rmsProjectServer:edit','rmsProjectServer:del'])" label="操作"
                         width="150px" align="center">
          <template slot-scope="scope">
            <el-popover
              :ref="scope.$index"
              v-permission="['admin']"
              placement="top"
              width="180"
            >
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
                <el-button type="primary" size="mini" @click="delMethod(scope.row.id,index)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="text">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import crudRmsProjectServer from '@/api/itrms/project/server'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = {projectId: null, serverIds: null}

export default {
  name: 'ProjectServer',
  props: ['projectId'],
  components: {pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '服务器',
      url: 'api/itrms/project/server/' + this.projectId,
      idField: 'id',
      sort: 'id,desc',
      crudMethod: {...crudRmsProjectServer}
    })
  },
  data() {
    return {
      serversInfo: [],
      permission: {
        del: ['admin', 'rmsProjectServer:del']
      },
      rules: {
        serverId: [
          {required: true, message: '服务器ID不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.crud.optShow.add = false
    this.crud.optShow.edit = false
    this.crud.optShow.del = false
    this.crud.optShow.download = false
  },
  methods: {
    // 新增前将多选的值设置为空
    [CRUD.HOOK.beforeToAdd]() {
      crudRmsProjectServer.getUnAllocate(this.projectId).then(res => {
        this.serversInfo = res.content
      })
    },
    // 新增前将多选的值设置为空
    [CRUD.HOOK.afterToCU]() {
      this.crud.form.projectId = this.projectId;
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.url = 'api/itrms/project/server/' + this.projectId
      this.crud.params = {
        status: 2,
        allocated: true
      }
      return true
    },
    // 删除服务器分配
    delMethod(id,index) {
      console.log("id",id)
      console.log("index",index)
      crudRmsProjectServer.del(this.projectId,id).then(() => {
        if (this.$refs[index]) {
          this.$refs[index].doClose()
        }
        this.crud.dleChangePage(1)
        this.crud.delSuccessNotify()
        this.crud.toQuery()
      }).catch(() => {
        if (this.$refs[index]) {
          this.$refs[index].doClose()
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
